<template>
  <uni-popup ref="fillState" type="center" :is-mask-click="false">
    <view class="fillState">
      <view style="margin-bottom: 20rpx;">退款金额</view>
      <input class="uni-input" placeholder="请输入退款金额" v-model="money" />
      <Button @cancel="closeBankPad" @confirm="submit()" style="margin-top:20rpx"></Button>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
  import Button from './buttom.vue';
  import { ref } from 'vue';
  import { errorToast, showLoading, successToast } from '@/utils/prompt';
  import { toPublish } from '@mqtt';
  const emit = defineEmits(['submit']);
  const props = defineProps({
    fillID: { type: String },
  });
  /**
   * 退款金额
   * @param {Null} fillState 弹框
   * @param {String} money 退款金额
   */
  const fillState = ref(null)
  const money = ref()
  function submit() {
    closeBankPad()
    if (!money.value) {
      errorToast('请输入退款金额')
    } else {
      const payload = {
        order_id: Number(props.fillID),
        tui_money: money.value
      }
      showLoading()
      toPublish('control/tuiFilling', payload, (obj : any) => {
        const { code, msg } = obj;
        if (code === 1) {
          successToast(msg)
          setTimeout(() => {
            emit('submit')
          }, 1000)
        } else {
          errorToast(msg)
        }
      });
    }
  }
  // 开关修改退款金额弹框
  function openBankPad() {
    money.value = ''
    fillState.value.open();
  }
  function closeBankPad() {
    fillState.value.close();
  }
  defineExpose({ openBankPad });
</script>

<style scoped lang="less">
  .fillState {
    width: 650rpx;
    background-color: white;
    border-radius: 5px;
    padding: 30rpx 30rpx 40rpx 30rpx;
    box-sizing: border-box;
  }

  input {
    width: 100%;
    height: 62rpx;
    background: #ECF0F6;
    border-radius: 5px;
    padding-left: 20rpx;
    box-sizing: border-box;
    margin: 0rpx 0px 40rpx;
  }
</style>